<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
            color: #333;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #eaeaea;
        }
        img {
            height: 100px;
            width: 100px;
            object-fit: cover;
        }
        .form-container {
            margin-top: 20px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .form-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .form-container input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            outline: none;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .form-container button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
        }
        .form-container button.loading::after {
            width: 150px;
            height: 150px;
            opacity: 1;
        }
        .form-container button:hover {
            background-color: #0056b3;
        }
        .form-group {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        .form-group label {
            margin-bottom: 5px;
            color: #333;
        }
        .form-group input {
            width: 100%;
        }
        .form-group button {
            margin-top: 10px;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.5s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .error-message {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
        .success-message {
            color: green;
            font-size: 14px;
            margin-top: 5px;
            animation: fadeInOut 2s forwards;
        }
        .delete-animation {
            animation: slideOut 0.5s forwards;
        }
        @keyframes fadeInOut {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes slideOut {
            0% { transform: translateY(0); }
            100% { transform: translateY(-20px); opacity: 0; }
        }
    </style>
</head>
<body>
    <h1>商品管理</h1>
    <div id="app">
        <table>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品图片</th>
                <th>商品库存</th>
                <th>操作</th>
            </tr>
            <transition-group name="fade">
                <tr v-for="(item, i) in items" :key="item.id" @click="deleteItemWithAnimation(i)">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><img :src="item.imgSrc" @error="handleImageError($event)" /></td>
                    <td>{{ item.num }}</td>
                    <td><button @click.stop="del(i)"><i class="fas fa-trash-alt"></i> 删除</button></td>
                </tr>
            </transition-group>
        </table>
        <div class="form-container">
            <div class="form-group">
                <label for="name">商品名称:</label>
                <input type="text" id="name" v-model="name" />
            </div>
            <div class="form-group">
                <label for="price">商品价格:</label>
                <input type="text" id="price" v-model="price" />
            </div>
            <div class="form-group">
                <label for="imgSrc">图片地址:</label>
                <input type="text" id="imgSrc" v-model="imgSrc" />
            </div>
            <div class="form-group">
                <label for="num">商品库存:</label>
                <input type="text" id="num" v-model="num" />
            </div>
            <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
            <div class="success-message" v-if="successMessage">{{ successMessage }}</div>
            <button @click="add" :class="{ loading: isLoading }">添加</button>
        </div>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    name: '',
                    price: '',
                    imgSrc: '',
                    num: '',
                    items: [
                        { id: 1, name: "iPhone 14", price: 8888, imgSrc: "../../pics/iphone14.jpg", num: 3 },
                        { id: 2, name: "华为Mate 6", price: 8888, imgSrc: "../../pics/mate40.jpg", num: 3 }
                    ],
                    errorMessage: '',
                    successMessage: '',
                    isLoading: false
                };
            },
            methods: {
                add() {
                    this.errorMessage = '';
                    this.successMessage = '';
                    this.isLoading = true;

                    setTimeout(() => {
                        if (this.name && this.price && this.imgSrc && this.num) {
                            const maxId = this.items.reduce((max, item) => Math.max(max, item.id), 0);
                            this.items.push({
                                id: maxId + 1,
                                name: this.name,
                                price: this.price,
                                imgSrc: this.imgSrc,
                                num: this.num
                            });
                            this.clearForm();
                            this.successMessage = "添加成功";
                        } else {
                            this.errorMessage = "请输入完整信息";
                        }
                        this.isLoading = false;
                    }, 1000); // 模拟异步操作
                },
                del(i) {
                    this.items.splice(i, 1);
                },
                clearForm() {
                    this.name = '';
                    this.price = '';
                    this.num = '';
                    this.imgSrc = '';
                },
                handleImageError(event) {
                    event.target.src = "default-image.jpg"; // 替换为默认图片
                },
                deleteItemWithAnimation(i) {
                    const row = document.querySelectorAll('tr')[i + 1]; // 跳过表头
                    row.classList.add('delete-animation');
                    setTimeout(() => {
                        this.del(i);
                    }, 500); // 动画持续时间
                }
            }
        }).mount("#app");
    </script>
</body>
</html>